from nicegui import ui
# Seercard
def alert():
    ui.run_javascript('alert("Hello!")')
def update_image(image):
    new_url = "https://vip.123pan.cn/1818691018/url/32.jpg"  # 新的图像 URL
    image.source = new_url  # 动态更新图像的源
    image.update()  # 让 NiceGUI 知道需要更新 UI
async def get_date():
    time = await ui.run_javascript('Date()')
    ui.notify(f'Browser time: {time}')
with ui.splitter(value=30).classes('w-full h-100') as splitter:
    ui.page_title('Seercard V0.01')
    with splitter.before:
        with ui.tabs().props('vertical').classes('w-full') as tabs:
            h1 = ui.tab('SeercardV0.01', icon='movie')
            item1 = ui.tab('抽卡', icon='movie')
            item2 = ui.tab('卡片管理', icon='movie')
            item3 = ui.tab('关于项目', icon='movie')
    ui.label('Seercard 0.01').classes('text-h4')
    with splitter.after:
        with ui.tab_panels(tabs, value=h1).props('vertical').classes('w-full h-full'):
            with ui.tab_panel(h1):
                ui.label('Seercard V0.01').classes('text-h4')
                ui.label("Seercard 是一个Seer2风格的卡片管理游戏")
                ui.label("此版本为Seer2.org定制版本")
            with ui.tab_panel(item1):
                ui.label('抽卡').classes('text-h4')
                with ui.row():
                    with ui.card():
                        ui.label('抽卡机器(config.version)')
                        ui.image("https://vip.123pan.cn/1818691018/url/31.png")
                with ui.row():
                    with ui.card():
                        with ui.row():
                            ui.button('单抽', on_click=alert)
                            ui.button('十连抽', on_click=lambda: ui.notify('You clicked Button 2!'))
                    ui.run()
            with ui.tab_panel(item2):
                ui.label('图片管理').classes('text-h4')
                columns = [  
                    {'name': 'id', 'label': 'ID', 'field': 'id', 'required': True, 'align': 'left'},  
                    # 可以继续添加其他您需要的列，比如交互序列、角色等  
                    {'name': 'interaction_sequence', 'label': '交互序列', 'field': 'interaction_sequence', 'required': False},  
                    {'name': 'role', 'label': '角色', 'field': 'role', 'required': False},  
                    {'name': 'cv', 'label': 'CV', 'field': 'cv', 'required': False},  
                    {'name': 'dialogue_or_voiceover', 'label': '对白/旁白/过场注释', 'field': 'dialogue_or_voiceover', 'required': False},  
                ]  
                rows = [  
                    {'id': 1, 'interaction_sequence': '1.02', 'role': '约瑟', 'cv': 'CV1', 'dialogue_or_voiceover': '↘喔，这不是生人勿近的奥比休斯大人嘛！'},  
                    {'id': 2, 'interaction_sequence': '1.03', 'role': '奎尔斯', 'cv': 'CV2', 'dialogue_or_voiceover': '正如你所期望的。翘曲点，就是今次危机的解法。'}
                ]  
                ui.table(columns=columns, rows=rows, row_key='name').classes("w-full")
                # 表单1
                with ui.card():
                    with ui.row():
                        ui.input(label='id', placeholder='start typing',
                                on_change=lambda e: result.set_text('you typed: ' + e.value),
                                validation={'Input too long': lambda value: len(value) < 20})
                        ui.input(label='路径', placeholder='start typing',
                                on_change=lambda e: result.set_text('you typed: ' + e.value),
                                validation={'Input too long': lambda value: len(value) < 20})
                        ui.input(label='调用名', placeholder='start typing',
                                on_change=lambda e: result.set_text('you typed: ' + e.value),
                                validation={'Input too long': lambda value: len(value) < 20})
                        ui.input(label='备注', placeholder='start typing',
                                on_change=lambda e: result.set_text('you typed: ' + e.value),
                                validation={'Input too long': lambda value: len(value) < 20})
                        result = ui.label()
                    with ui.row():
                        with ui.card():
                            with ui.row():
                                ui.button('添加', on_click=lambda: ui.notify('You clicked Button 1!')).style("margin-right:20px")
                                ui.button('读取', on_click=lambda: ui.notify('You clicked Button 2!')).style("margin-right:20px")
                                ui.button('更新配置', on_click=lambda: ui.notify('You clicked Button 3!'))                    
            with ui.tab_panel(item3):
                ui.label('音频台词管理').classes('text-h4')
                columns = [  
                    {'name': 'id', 'label': 'ID', 'field': 'id', 'required': True, 'align': 'left'},  
                    # 可以继续添加其他您需要的列，比如交互序列、角色等  
                    {'name': 'interaction_sequence', 'label': '交互序列', 'field': 'interaction_sequence', 'required': False},  
                    {'name': 'role', 'label': '角色', 'field': 'role', 'required': False},  
                    {'name': 'cv', 'label': 'CV', 'field': 'cv', 'required': False},  
                    {'name': 'dialogue_or_voiceover', 'label': '对白/旁白/过场注释', 'field': 'dialogue_or_voiceover', 'required': False},  
                ]  
                rows = [  
                    {'id': 1, 'interaction_sequence': '1.02', 'role': '约瑟', 'cv': 'CV1', 'dialogue_or_voiceover': '↘喔，这不是生人勿近的奥比休斯大人嘛！'},  
                    {'id': 2, 'interaction_sequence': '1.03', 'role': '奎尔斯', 'cv': 'CV2', 'dialogue_or_voiceover': '正如你所期望的。翘曲点，就是今次危机的解法。'}
                ]  
                ui.table(columns=columns, rows=rows, row_key='name').classes("w-full")
                with ui.card():
                    with ui.row():
                        ui.input(label='id', placeholder='start typing',
                                on_change=lambda e: result.set_text('you typed: ' + e.value),
                                validation={'Input too long': lambda value: len(value) < 20})
                        ui.input(label='路径', placeholder='start typing',
                                on_change=lambda e: result.set_text('you typed: ' + e.value),
                                validation={'Input too long': lambda value: len(value) < 20})
                        ui.input(label='调用名', placeholder='start typing',
                                on_change=lambda e: result.set_text('you typed: ' + e.value),
                                validation={'Input too long': lambda value: len(value) < 20})
                        ui.input(label='备注', placeholder='start typing',
                                on_change=lambda e: result.set_text('you typed: ' + e.value),
                                validation={'Input too long': lambda value: len(value) < 20})
                        result = ui.label()
                    with ui.row():
                        with ui.card():
                            with ui.row():
                                ui.button('添加', on_click=lambda: ui.notify('You clicked Button 1!')).style("margin-right:20px")
                                ui.button('读取', on_click=lambda: ui.notify('You clicked Button 2!')).style("margin-right:20px")
                                ui.button('更新配置', on_click=lambda: ui.notify('You clicked Button 3!')) 

ui.run()